<template>
  <div class="v-editor-input-rows g-flex g-ov-hidden">
    <div class="g-flex-1 g-flex-wrap">
      <div
        v-for="(item, index) of inputItems"
        :key="index"
        class="__input-rows-row"
      >
        <HTMLViewer
          v-if="isAHtmlItem(item.value)"
          :htmlText="item.value"
          :projectId="getProjectId()"
          @click.prevent
        />
        <div v-else>
          {{ item.value }}
        </div>
      </div>
    </div>
    <!-- 这里判断是否为编辑状态展示 -->
    <div
      v-if="selected && !row.readonly && !isModelDisabled"
      class="_input-rows-operation-btns g-flex-0 g-lh-14 g-pd-4"
    >
      <div>
        <img
          src="statics/icons/propertyOperation/iconadd.png"
          class="g-pointer"
          @click="handleClick(EditorOperateType.ADD)"
        />
      </div>
      <div
        class="g-m-t-2 img-btn"
        @click="handleClick(EditorOperateType.OPEN)"
      >
        <img
          src="statics/icons/app/iconmore.png"
          class="g-pointer"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import HTMLViewer from "@/modules/model/comps/common/HTMLViewer.vue";
import { PropertyRow } from "../../types";
import { modelService } from "@/modules/model/service";
import { watch, reactive, inject, Ref, computed } from "vue";
import { propertyUtil } from "../../PropertyUtil";
import { BusEvent } from "@/constants/Enums";
import { debounce } from "lodash-es";
import { arrayEqual, getUid } from "@/util/common";
import ValueEditor from "../modals/ValueEditor.vue";
import { EditorOperateType } from "./ValueSpecificationTypes";
import { locale } from "@/util/locale";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();

const inputItems = reactive(
  ((props.row.value || []) as string[]).filter(it => it !== undefined && it !== null).map(it => ({ value: it, id: getUid() }))
);

const saveValue = debounce(async () => {
  const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow(props.row, app.activeProject!.id);
  dto.value = inputItems.map(it => it.value);
  if (arrayEqual(dto.value, (props.row.value || []) as string[])) {
    return;
  }
  let res = await modelService.updateModelProperty(dto);

  if (res) {
    app.$bus.emit(BusEvent.REFRESH_PROPERTY, props.row.modelId);
  }
}, 50);
const isHtmlTextProperty = computed(() => propertyUtil.isHtmlTextProperty(props.row.key, props.row.dataType));
watch(
  () => props.row.value,
  () => {
    inputItems.splice(0, inputItems.length, ...((props.row.value || []) as string[]).map(it => ({ value: it, id: getUid() })));
  }
);
const getProjectId = () => app.activeProject?.id || "";

function isAHtmlItem(source: string) {
  if (!isHtmlTextProperty.value) {
    return false;
  }

  return source.startsWith("<");
}

function handleClick(operateType: EditorOperateType) {
  console.log("props.row.dataTyp:", props.row.dataType);
  ValueEditor.popup({
    inputItems,
    title: locale.t("文本编辑器"),
    operateType,
    modelId: props.row.modelId,
    isHtmlTextProperty: isHtmlTextProperty.value,
    dataType: props.row.dataType
  }).then((newInputItems: typeof inputItems) => {
    console.log("newInputItems:", newInputItems);
    inputItems.splice(0, inputItems.length, ...newInputItems);
    saveValue();
  });
}
</script>
<style lang="scss" scoped>
.v-editor-input-rows {
  display: flex;
  height: 100%;
  padding-left: 4px;
  .__input-rows-row {
    border-bottom: 1px solid #ddd;
    position: relative;
    line-height: 22px;
    width: 100%;
    min-height: 22px; // 处理空值最小高度展示
    &:last-of-type {
      border-bottom: none;
    }
    div {
      word-break: break-all;
    }
  }
  ._input-rows-operation-btns {
    border-left: 1px solid #ddd;
  }
  .img-btn {
    text-align: end;
  }
}
._current-row {
  .v-editor-input-rows {
    .__input-rows-row {
      &:last-of-type {
        // border-bottom: 1px solid #ddd;
      }
    }
  }
}
</style>
